<template>
  <div class="dashboard-container">

    <el-tabs v-model="activeName">
      <el-tab-pane label="考试界面" name="first">
        <el-card shadow="hover"
                class="mt15"
        >
        <el-table :data="tableData"
                    stripe
                    ref="multipleTable"
                    @selection-change="handleSelectionChange"
                    style="width: 100%"
        >
            <el-table-column type="expand">
            <template slot-scope="props">
                <el-table
                :data="props.row.examDetailDTOS"
                style="width: 100%"
                >
                <el-table-column
                    prop="examName"
                    label="考试名称"
                    width="180"
                >
                </el-table-column>
                <el-table-column
                    prop="questionName"
                    label="题目名称"
                    width="180"
                >
                </el-table-column>
                <el-table-column
                    prop="grade"
                    label="我的分数"
                >
                </el-table-column>
                <el-table-column
                    prop="questionGrade"
                    label="问题分数"
                >
                </el-table-column>
                <el-table-column
                    prop="answer"
                    label="正确答案"
                >
                </el-table-column>
                </el-table>
            </template>
            </el-table-column>
            <!-- <el-table-column prop="id"
                            align="center"
                            label="编号"
            >
            </el-table-column> -->
            <el-table-column prop="name"
                            align="center"
                            label="学生姓名"
            >
            </el-table-column>
            <el-table-column prop="examName"
                            align="center"
                            label="考试名称"
            >
            </el-table-column>
            <el-table-column prop="examScore"
                            align="center"
                            label="考试成绩"
            >
            </el-table-column>
            <el-table-column prop="createTime"
                            align="center"
                            label="考试发布时间"
            >
            </el-table-column>
            <el-table-column prop="createTime"
                            align="center"
                            label="考试参加时间"
            >
            </el-table-column>
        </el-table>
        <pagination v-show="total>0"
                    :total="total"
                    :page.sync="listQueryParam.current"
                    :limit.sync="listQueryParam.pageSize"
                    @pagination="getTableDataList"
        />
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="密码修改" name="second">
        <el-card style="width: 80%;">
          <el-form :model="formData"
                   :rules="rules"
                   ref="formDataPwd"
                   label-width="100px"
          >
            <el-form-item label="旧密码"
                          prop="oldPwd"
            >
              <el-input v-model="formData.oldPwd" type="password" show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码"
                          prop="newPwd"
            >
              <el-input v-model="formData.newPwd" type="password" show-password></el-input>
            </el-form-item>
            <el-form-item label="再次输入"
                          prop="againPwd"
            >
              <el-input v-model="formData.againPwd" type="password" show-password></el-input>
            </el-form-item>
            <el-form-item
            >
              <el-button @click="updatePwd">提交</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import {
  getList,
  insert,
  update,
  get,
  del,
  getExamDate,
  getStudentDate,
  saveData,
  saveNewData
} from '@/api/ExamStudent/index'
import Pagination from '@/components/Pagination'
import { tableUtil } from '@/mixins/table'
import { Message } from 'element-ui'
import uploadImg from '@/components/ImageUpload'
import ImgPreview from '@/components/ImgPreview'
import FileUpload from '@/components/FileUpload'

export default {
  mixins: [tableUtil],
  components: {
    FileUpload,
    Pagination, uploadImg, ImgPreview
  },
  data() {
    return {
      type: localStorage.getItem('examType'),
      listQueryParam: {
        current: 1,
        pageSize: 5
      },
      excelUrl: '',
      dialogVisible: false,
      showExcel: false,
      formData: {},
      rules: {
        examId: [
          { required: true, message: '请选择所属考试', trigger: 'change' }
        ],
        studentId: [
          { required: true, message: '请选择所属学生', trigger: 'change' }
        ]
      },
      examIdOptions: [],
      studentIdOptions: [],
      currentStudent: {}
    }
  },
  mounted() {
    this.getTableDataList()
  },
  methods: {
    uploadExcel() {
      this.dialogVisible = true
    },
    saveExcel() {
      if (!this.excelUrl) {
        Message.error('请先上传文件')
        return
      }
      let param = {}
      param.url = this.excelUrl
      param.studentId = localStorage.getItem('examId')
      saveNewData(param).then((res) => {
        this.excelUrl = ''
        Message.success(res.data)
        this.dialogVisible = false
      })
    },
    getTableDataList() {
      if (this.type == 2) {
        this.listQueryParam.studentId = localStorage.getItem('examId')
      }
      getList(this.listQueryParam).then((res) => {
        this.total = res.data.total
        this.tableData = res.data.records.map(record => {
            // 计算总成绩
            const examScore = record.examDetailDTOS.reduce((sum, detail) => {
                return sum + Number(detail.grade); // 将 grade 转换为数字
             return { ...record, examScore }; // 将总成绩添加到每条记录中
           }, 0);
        })
      })
    },
    updateClick(row) {
      this.dialogTitle = '修改'
      get(row.id).then((res) => {
        this.formData = res.data
        this.addOrUpdateDialogVisible = true
      })
    },
    delByIds(ids) {
      del(ids).then((res) => {
        Message.success('删除成功')
        this.getTableDataList()
      })
    },
    saveData() {
      if (this.formData.id) {
        update(this.formData).then((res) => {
          Message.success('修改成功')
          this.addOrUpdateDialogVisible = false
          this.getTableDataList()
        })
      } else {
        insert(this.formData).then((res) => {
          Message.success('添加成功')
          this.addOrUpdateDialogVisible = false
          this.getTableDataList()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
